;(function($){
    "use strict";
    $.fn.banner = function(data,ops={}){
        // 1.处理参数
        let {
            btn = false,
            list = true,
            autoPlay = true,
            delayTime = 2000,
            moveTime = 200,
            index = 0, 
            // 
            currentClass = "active"
        } = ops;
         
        // 走的那张照片
        let prev;
        const that = this;
        // 2.根据数据，渲染页面结构
        init();
        // 图片
        function init(){
            let str = "";
            $.each(data,(idx,val)=>{
                str += `<img src="${val.src}" alt="${val.alt}" title="${val.title}">`
            })
            // jquery的创建方法
            $("<div class='imgbox'>"+str+"</div>").appendTo(that);
        }
       

        // 开始做功能
        // 3.左右按钮切换轮播图
        if(btn){
           $("<input type='button' id='left' value='<'>").appendTo($("<div class='btns'></div>").appendTo(this)).parent().append($("<input type='button' id='right' value='>'>")).children("#left").click(leftClick).end().children("#right").click(rightClick)
        }
        function leftClick(){
            // 如果点击左按钮到第一张照片时
            if(index === 0){
                index = data.length-1;
                prev = 0;
            }else{
                index--;
                prev = index+1;
            }
            move(prev,index,-1)
        }
        function rightClick(){
            if(index === data.length-1){
                index = 0;
                prev = data.length-1;
            }else{
                index++;
                prev = index-1;
            }
            move(prev,index,1)
        }
       
        // 4.分页器切换轮播图
        if(list){
            // 渲染页面结构并绑定事件
            let str = "";
            $.each(data, idx => {
                str += `<span></span>`;
            });
            $("<div class='list'>"+str+"</div>").appendTo(this).children("span").eq(index).addClass(currentClass).end().click(function(){
                if($(this).index() > index){
                    // console.log("左")
                    // 当时点的进来$(this).index()
                    move(index, $(this).index(), 1)
                }
                if($(this).index() < index){
                    // console.log("右")
                    move(index, $(this).index(), -1)
                }
                // 当前点击的，就是下一次要走的
                index = $(this).index();
            })
        }

        // 5.自动播放
        if(autoPlay){
            let t = setInterval(() => {
                rightClick()
            },delayTime);

            this.hover(function(){
                clearInterval(t)
            },function(){
                t = setInterval(() => {
                    rightClick()
                },delayTime);
            })
        }





        function move(prev,next,d){
            // 先设置要走的图片的默认位置
            // 开始走的位置  走到哪
            // 在设置要进来的图片的默认位置
            // 开始进来位置 从哪进来
            that.children(".imgbox").children().eq(prev).css({
                left:0
            }).stop().animate({
                left:-that.children(".imgbox").children().eq(0).width() * d
            },moveTime).end().eq(next).css({
                left:that.children(".imgbox").children().eq(0).width() * d
            }).stop().animate({
                left:0
            },moveTime)

            that.children(".list").children("span").eq(next).addClass(currentClass).siblings().removeClass(currentClass)
        }
    }
       
})(jQuery);